<template>
  <div class="tz">
    <van-search v-model="value" shape="round" background="#1989fa" placeholder="请输入搜索关键词" />
    <van-field v-model="startingAddress" center clearable label="起点位置:" placeholder="请定位您想去的位置." style="">
      <template #button>
        <van-button size="small" type="primary">虚拟定位</van-button>
      </template>
    </van-field>
    <div style="display: flex;justify-content: center;width: 96%;padding-left: 6px;">
      <span style="font-size: 15px;margin-top: 5px;">起点距离:</span>
      <el-input v-model="startingDistance" placeholder="请输入内容" style="width: 30%;"></el-input>

      <span style="font-size: 15px;margin-top: 5px;padding-left: 6px;">刷新时长:</span>
      <el-input v-model="refreshTime" placeholder="请输入内容" style="width: 30%;"></el-input>
    </div>

    <div style="display: flex;width: 96%;padding-left:14px;margin-top: 5px;">
      <span style="font-size: 15px;margin-top: 5px;">出发时间:</span>
      <el-input v-model="departureTime" placeholder="请输入内容" style="width:78.5%;"></el-input>
    </div>

    <div style="display: flex; width: 96%;padding-left: 6px;margin-top: 5px;">
      <span style="font-size: 15px;margin-top: 5px;padding-left: 8px;">订单金额:</span>
      <el-input v-model="orderMoney" placeholder="请输入内容" style="width: 30%;"></el-input>
      <van-checkbox v-model="isLx" shape="square" style="padding-left: 6px;">
        <van-icon name="friends" size="15px" color="#1989fa" />
        <span style="font-size: 15px;">是否连续抓单</span></van-checkbox>
    </div>

    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      接单模型设置
    </van-divider>
    <div style="width: 96%;padding-left: 13px;margin-top: -20px;">
      <van-checkbox v-model="dtOrderchecked" shape="square" style="margin-top: 5px;">
        <van-icon name="wap-home" size="15px" color="#E6A23C" />
        <span style="font-size: 15px;">大厅订单</span></van-checkbox>
      <van-checkbox v-model="xcOrderchecked" shape="square" style="margin-top: 5px;">
        <van-icon name="cluster" size="15px" color="#F56C6C" />
        <span style="font-size: 15px;">行程订单</span></van-checkbox>
      <van-checkbox v-model="cyAddreschecked" shape="square" style="margin-top: 5px;">
        <van-icon name="sort" size="15px" color="#909399" />
        <span style="font-size: 15px;">常用路线</span></van-checkbox>
    </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      接单人数设置
    </van-divider>
    <div style="width: 96%;padding-left: 13px;margin-top: -20px;">
      <van-checkbox v-model="dxcheck" shape="square">
        <van-icon name="user" size="15px" color="#1989fa" />
        <span style="font-size: 15px;">独享人数</span>
        <el-input v-model="dxPersonNumber" placeholder="请输入内容" style="width: 30%;padding-left: 10px;"></el-input>
      </van-checkbox>

      <van-checkbox v-model="pzcheck" shape="square" style="margin-top: 5px;">
        <van-icon name="friends" size="15px" color="#1989fa" />
        <span style="font-size: 15px;">拼座人数</span><el-input v-model="pzPersonNumber" placeholder="请输入内容"
          style="width: 30%;padding-left: 10px;"></el-input></van-checkbox>

      <van-checkbox v-model="slcdchecked" shape="square" style="margin-top: 5px;">
        <van-icon name="discount" size="15px" color="#1989fa" />
        <span style="font-size: 15px;">顺路程度</span><el-input v-model="slcdNuber" placeholder="请输入内容"
          style="width: 30%;padding-left: 10px;"></el-input></van-checkbox>
    </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      抢单成功记录
    </van-divider>
    <div style="padding-left: 10px;width: 95%;margin-top: -20px;">
      <el-input type="textarea" :rows="5" placeholder="" v-model="textarea">
      </el-input>
    </div>
    <div style="padding-left: 15px;width: 92%;margin-top: 5px;">
      <van-button round block type="info" @click="startQD">
        <span v-if="this.isQd === '0'">开始抢单</span>
        <span v-if="this.isQd === '1'">停止抢单</span>
      </van-button>
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="comment-o">日志</van-tabbar-item>
      <van-tabbar-item icon="volume-o">通知</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      active: 0,
      startingAddress: "", // 起点位置
      startingDistance: 30, // 接单距离
      refreshTime: "0-200", // 刷新时长
      orderMoney: "200-9999", // 订单金额
      remarks: "", // 备注
      isLx: true, // 是否连续抓单
      // 接单模型选择框区
      dtOrderchecked: false,
      xcOrderchecked: false,
      cyAddreschecked: false,
      // 接单人数选择框和输入框区
      dxcheck: false,
      dxPersonNumber: "1-4",
      pzcheck: false,
      pzPersonNumber: "3-4",
      // 顺路度选择框和输入框区
      slcdchecked: false,
      slcdNuber: 97,
      departureTime: "2024-07-09 00:00:00-2024-07-24 23:59:59",
      activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
      inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
      isQd: "0",

      // 日志
      textarea: "",

      startQDInfo: {
        startingAddress: "", // 起点位置
        startingDistance: "", // 接单距离
        refreshTime: "", // 刷新时长
        orderMoney: "", // 订单金额
        remarks: "", // 备注
        isLx: true, // 是否连续抓单
        // 接单模型选择框区
        dtOrderchecked: false,
        xcOrderchecked: false,
        cyAddreschecked: false,
        // 接单人数选择框和输入框区
        dxcheck: false,
        dxPersonNumber: "",
        pzcheck: false,
        pzPersonNumber: "",
        // 顺路度选择框和输入框区
        slcdchecked: false,
        slNumber: 97,
        departureTime: "",
        phone: "",
      },
      phone: "",
    };
  },
  created() {
    this.phone = this.$route.query.phone;
    // 读取用户配置
    this.readConfig();
    this.getUserLog();
  },
  methods: {
    readConfig() {
      const params = {
        phone: this.phone,
      };
      axios
        .get("http://123.60.46.49:8080/qd/readConfig", { params: params })
        .then((res) => {
          if (res.data.code === 500) {
            this.$message.error("服务未启动或奔溃请联系客户.");
          } else {
            if (res.data.data != null) {
              // 回显数据
              this.startingAddress = res.data.data.startingAddress; // 起点位置
              this.startingDistance = res.data.data.startingDistance; // 接单距离
              this.refreshTime = res.data.data.refreshTime; // 刷新时长
              this.orderMoney = res.data.data.orderMoney; // 订单金额
              this.remarks = res.data.data.remarks; // 备注
              this.isLx = res.data.data.lx; // 是否连续抓单
              // 接单模型选择框区
              this.dtOrderchecked = res.data.data.dtOrderChecked;
              this.xcOrderchecked = res.data.data.xcOrderChecked;
              this.cyAddreschecked = res.data.data.cyAddresChecked;
              // 接单人数选择框和输入框区
              this.dxcheck = res.data.data.dxCheck;
              this.dxPersonNumber = res.data.data.dxPersonNumber;
              this.pzcheck = res.data.data.pzCheck;
              this.pzPersonNumber = res.data.data.pzPersonNumber;
              // 顺路度选择框和输入框区
              this.slcdchecked = res.data.data.slcdChecked;
              this.slcdNuber = res.data.data.slNumber;
              this.departureTime = res.data.data.departureTime;

              this.isQd = res.data.data.isQd;
            }
          }
        });
    },
    getUserLog() {
      const params = {
        phone: this.phone,
      };
      axios
        .get("http://123.60.46.49:8080/log/queryUserQdLog", { params: params })
        .then((res) => {
          if (res.data.code === 500) {
            this.$message.error("服务未启动或奔溃请联系客户.");
          } else {
            for (var i = 0; i < res.data.data.length; i++) {
              if(i === 0){
                this.textarea =  res.data.data[i].text + "\n" + "\n";
              }else{
                this.textarea = this.textarea + res.data.data[i].text + "\n"+ "\n";
              }
            }
          }
        });
    },
    startQD() {
      this.startQDInfo.startingAddress = this.startingAddress;
      this.startQDInfo.startingDistance = this.startingDistance;
      this.startQDInfo.refreshTime = this.refreshTime;
      this.startQDInfo.orderMoney = this.orderMoney;
      this.startQDInfo.remarks = this.remarks;
      this.startQDInfo.isLx = this.isLx;

      this.startQDInfo.dtOrderchecked = this.dtOrderchecked;
      this.startQDInfo.xcOrderchecked = this.xcOrderchecked;
      this.startQDInfo.cyAddreschecked = this.cyAddreschecked;

      this.startQDInfo.dxcheck = this.dxcheck;
      this.startQDInfo.dxPersonNumber = this.dxPersonNumber;
      this.startQDInfo.pzcheck = this.pzcheck;
      this.startQDInfo.pzPersonNumber = this.pzPersonNumber;

      this.startQDInfo.slcdchecked = this.slcdchecked;
      this.startQDInfo.slNumber = this.slcdNuber;
      this.startQDInfo.departureTime = this.departureTime;
      this.startQDInfo.phone = this.phone;

      axios
        .get("http://123.60.46.49:8080/qd/startQd", { params: this.startQDInfo })
        .then((res) => {
          if (res.data.code === 500) {
            this.$message.error("服务未启动或奔溃请联系客户.");
          } else {
            this.$message({
              message: res.data.data,
              type: "success",
            });
            this.readConfig();
          }
        });
    },
    onChange(index) {
      if (index === 1) {
        this.$router.push("/log?phone=" + this.phone);
      }
      if (index === 2) {
        this.$router.push("/tz?phone=" + this.phone);
      }
      if (index === 3) {
        this.$router.push("/my?phone=" + this.phone);
      }
    },
  },
};
</script>